<template>
  <div class="shudu">
    <div class="nav">
      <Nav></Nav>
      <div class="blog-banner">
        <div class="blog-flash">
        </div>
        <div class="blog-logo">
          <img src="http://static.ws.126.net/f2e/news/datablog/assets/img/logo.png" alt="用数据说话，提供轻量化的阅读体验">
        </div>
      </div>
      <div class="blog-top">
        <div class="blog-area">
          <ul class="blog-nav">
            <li cate="qb" class="blog-current"><a href="javascript:;" target="_self"><h4>全部</h4><h5>Total</h5>
              <i></i></a></li>
          </ul>
          <div class="blog-order" style="display:none;">
            <span>排序方式</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main_content">
      <div class="blog-area">
        <div class="main clearfix">
          <div class="left" style="width: 700px;float: left">
            <ul style="float: left" class="post-list" v-for="it in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
              <li style="list-style: none;float: left">
                <a href="">
                <img alt="考研最卷的专业，我提名新传"
                :src="'static/img/shudu/'+it.img">
                <h2>{{it.title}}</h2>
                </a>
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="poster" style="min-height: 100px;">
              <h4 class="articleTitle">栏目编辑</h4>
              <div class="blue-line"></div>
              <ul>
                <li>
                  <img src="http://static.ws.126.net/cnews/2016/5/19/201605191440256814c.jpg" width="60" height="60"
                       alt="巫雨松">
                  <p>巫雨松</p>
                  <p class="position">网易新闻中心编辑</p>
                </li>
              </ul>
            </div>
            <div class="followus">
              <h4 class="articleTitle">关注我们</h4>
              <div class="blue-line"></div>
              <ul>
                <li><a href="" class="sina_weibo weixin" id="weixin"><span class="my_qrcode" id="weixin_code"
                                                                           style="left: 999.6px; top: 260.6px; display: none;"></span></a>
                </li>
                <li><a href="http://weibo.com/datablog" class="sina_weibo"></a></li>

              </ul>
            </div>
            <!--[if gt IE 6]><!-->
            <div class="blog-upto" id="GoToTop" style="display: none;"></div>
            <!--<![endif]-->
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";

  export default {
    name: "Shudu",
    data() {
      return {
        currentPage: 1, //初始页
        pageSize: 11,    //每页的数据
        tableData: [{}],
      }
    },
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
      /*查询所有的数独*/
      findAll() {
        let _this = this
        this.$axios.get("http://localhost:8055/shudu/getShudu").then(function (res) {
          _this.tableData = res.data
          console.log(_this.tableData)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
    },
    components: {
      Nav,
      Footer
    },
    mounted() {
      this.findAll()
    }
  }
</script>

<style scoped>

  .blog-area .left .post-list li {
    margin: 0 0 20px 10px;
    width: 220px;
    height: 124px;
    overflow: hidden;
    float: left;
    position: relative;
  }

  .blog-area .left .post-list img {
    display: block;
    width: 220px;
    height: 124px;
    margin-top: 0;
  }

  :link img, :visited img, a img, fieldset, img {
    border: 0;
  }

  .blog-area .left .post-list h2 {
    font-family: 微软雅黑;
  }

  .blog-area .left .post-list h2 {
    width: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-size: 12px;
    padding: 5px 10px;
    color: #fff;
    z-index: 9;
    background: url(../assets/halffirst.png);
    background-position: 0 0;
    -webkit-transition: background-position .2s ease 0s;
    -o-transition: background-position .2s ease 0s;
    -moz-transition: background-position .2s ease 0s;
    transition: background-position .2s ease 0s;
  }

  .main div.right {
    width: 260px;
    overflow: hidden;
  }

  .right {
    float: right;
  }

  .poster {
    padding: 0;
    min-height: 300px;
    _height: 300px;
    margin-bottom: 20px;
  }

  .blue-line {
    height: 4px;
    background-color: #b1ddf1;
    background-position: 0px 0px;
    margin: 10px 0 22px 0;
  }

  .blue-line, .rss, .t_163, .sina_weibo, .blog-upto, .blog-top-a i {
    background: url(../assets/icon.png) 0 0 no-repeat;
  }

  .sina_weibo {
    background-position: -45px -54px;
  }

  .blue-line {
    height: 4px;
    background-color: #b1ddf1;
    background-position: 0px 0px;
    margin: 10px 0 22px 0;
  }

  .poster li {
    padding: 0 0 10px 0;
  }

  .poster p {
    margin: 0;
    line-height: 20px;
  }

  .poster .position {
    color: #7e7e7e;
  }

  .poster p {
    margin: 0;
    line-height: 20px;
  }

  .followus {
    overflow: hidden;
    margin-bottom: 20px;
  }

  .articleTitle {
    clear: both;
    font: bold 16px \5fae\8f6f\96c5\9ed1;
    color: #12c7f3;
  }

  .weixin {
    background-image: url(http://static.ws.126.net/f2e/sports/worldchampionship_10km_results/images/weixin.png);
    background-position: center;
  }

  .rss, .t_163, .sina_weibo {
    width: 44px;
    height: 44px;
    float: left;
    border: 2px solid #fafafa;
    margin-right: 10px;
    transition: border-color .3s ease 0s;
  }

  .followus {
    overflow: hidden;
    margin-bottom: 20px;
  }

  .articleTitle {
    clear: both;
    font: bold 16px \5fae\8f6f\96c5\9ed1;
    color: #12c7f3;
  }

  .blog-area .left .post-list .first-news {
    margin: 0 0 20px 10px;
    width: 450px;
    height: 268px;
    overflow: hidden;
    float: left;
    position: relative;
  }

  a {
    text-decoration: none;
  }

  .blog-area .left .post-list .first-news img {
    display: block;
    width: 450px;
    height: 268px;
    margin-top: 0;
  }

  .blog-area .left .post-list .first-news h2 {
    font-size: 18pt;
  }

  .blog-area .left .post-list .first-news h2 {
    width: 430px;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    font-size: 12px;
    padding: 5px 10px;
    color: #fff;
    z-index: 9;
    background: url(../assets/halffirst.png);
    background-position: 0 0;
    -webkit-transition: background-position .2s ease 0s;
    -o-transition: background-position .2s ease 0s;
    -moz-transition: background-position .2s ease 0s;
    transition: background-position .2s ease 0s;
  }

  .blog-area .left .post-list h2 {
    font-family: 微软雅黑;
  }

  .blog-loading {
    height: 59px;
    width: 59px;
    background: url(../assets/loading.gif);
    margin: 0 auto;
  }

  .main {
    margin: 30px 0 20px 0;
    overflow: visible;
  }

  .left {
    float: left;
  }

  .blog-area .left .post-list {
    overflow: hidden;
  }

  ol, ul {
    list-style: none;
  }

  .blog-area {
    width: 1000px;
    margin: 0 auto;
  }

  .blog-order {
    float: left;
    height: 30px;
    width: 90px;
    margin-top: 12px;
  }

  .blog-area {
    width: 1000px;
    margin: 0 auto;
  }

  .blog-nav {
    width: 740px;
    float: left;
    overflow: hidden;
  }

  ol, ul {
    list-style: none;
  }

  .blog-nav li {
    float: left;
    margin: 7px 10px 0 0;
    text-align: center;
    font: 14px/18px \5b8b\4f53;
    padding-top: 3px;
    width: 80px;
    height: 36px;
    border-bottom-width: 0;
    position: relative;
    padding-bottom: 1px;
  }

  a {
    text-decoration: none;
  }

  .blog-nav li h4 {
    font-family: \5fae\8f6f\96c5\9ed1;
    font-weight: 500;
  }

  .blog-nav li h5 {
    font-family: arial;
    font-weight: 500;
    overflow: hidden;
  }

  .blog-nav li i {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    transition: height .3s ease 0s;
  }

  .blog-nav li a {
    color: #555;
    cursor: pointer;
  }

  i {
    font-style: italic;
  }

  .blog-nav .blog-current a {
    color: #08a0e1;
    cursor: default;
  }

  .blog-top, .blog-top-a {
    background: url(../assets/top.jpg) center top no-repeat;
    height: 53px;
    -webkit-box-shadow: 3px 3px 5px #ccc;
    -moz-box-shadow: 3px 3px 5px #ccc;
    box-shadow: 3px 3px 5px #ccc;
    width: 100%;
    position: relative;
  }

  .blog-banner {
    width: 100%;
    position: relative;
    height: 198px;
    overflow: hidden;
    margin-bottom: 5px;
    background: url(../assets/banner_1.jpg) center bottom no-repeat;
  }

  .blog-flash {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
  }

  :link img, :visited img, a img, fieldset, img {
    border: 0;
  }

  fieldset, img, a img, :link img, :visited img {
    border: 0;
  }

  .blog-logo {
    position: absolute;
    left: 50%;
    bottom: 60px;
    z-index: 99;
    margin-left: -480px;
    color: #8b8b8b;
    /*font: 14px/24px \5fae\8f6f\96c5\9ed1,\5b8b\4f53;*/
    letter-spacing: 2px;
  }

  video {
    object-fit: contain;
  }
</style>
